<div id="right-sidebar">
<div class="sidebar-container">

<ul class="nav nav-tabs navs-3">
    <li class="active">
        <a data-toggle="tab" href="#tab-1">
            <i class="fa fa-gear"></i> 主题
        </a>
    </li>
    <li class="">
        <a data-toggle="tab" href="#tab-2">通知</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-3">项目进度</a>
    </li>
</ul>
<div class="tab-content">
    <div id="tab-1" class="tab-pane active">
        <div class="sidebar-title">
            <h3> <i class="fa fa-comments-o"></i> 主题设置</h3>
            <small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式，这些设置会被保存在本地。</small>
        </div>
        <div class="skin-setttings">
            <div class="title">主题设置</div>
            <div class="setings-item">
                <span>收起左侧菜单</span>
                <div class="switch">
                    <div class="onoffswitch">
                        <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu">
                        <label class="onoffswitch-label" for="collapsemenu">
                            <span class="onoffswitch-inner"></span>
                            <span class="onoffswitch-switch"></span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="setings-item">
                <span>固定顶部</span>
                <div class="switch">
                    <div class="onoffswitch">
                        <input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar">
                        <label class="onoffswitch-label" for="fixednavbar">
                            <span class="onoffswitch-inner"></span>
                            <span class="onoffswitch-switch"></span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="setings-item">
                <span>
                固定宽度
            </span>
                <div class="switch">
                    <div class="onoffswitch">
                        <input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout">
                        <label class="onoffswitch-label" for="boxedlayout">
                            <span class="onoffswitch-inner"></span>
                            <span class="onoffswitch-switch"></span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="title">皮肤选择</div>
            <div class="setings-item default-skin nb">
                <span class="skin-name ">
                 <a href="javascript:;" class="s-skin-0">
                     默认皮肤
                 </a>
            </span>
            </div>
            <div class="setings-item blue-skin nb">
                <span class="skin-name ">
                <a href="javascript:;" class="s-skin-1">
                    蓝色主题
                </a>
            </span>
            </div>
            <div class="setings-item yellow-skin nb">
                <span class="skin-name ">
                <a href="javascript:;" class="s-skin-3">
                    黄色/紫色主题
                </a>
            </span>
            </div>
        </div>
    </div>
    <div id="tab-2" class="tab-pane">
        <div class="sidebar-title">
            <h3> <i class="fa fa-comments-o"></i> 最新通知</h3>
            <small><i class="fa fa-tim"></i> 您当前有10条未读信息</small>
        </div>
        <div>
            <div class="sidebar-message">
                <a href="javascript:;">
                    <div class="pull-left text-center">
                        <!--<img alt="image" class="img-circle message-avatar" src="__CDN__/assets/admin/img/a1.jpg" />-->
                        <div class="m-t-xs">
                            <i class="fa fa-star text-warning"></i>
                            <i class="fa fa-star text-warning"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        通知一
                        <br/>
                        <small class="text-muted">今天 4:21</small>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div id="tab-3" class="tab-pane">
        <div class="sidebar-title">
            <h3> <i class="fa fa-cube"></i> 最新任务</h3>
            <small><i class="fa fa-tim"></i> 您当前有14个任务，10个已完成</small>
        </div>
        <ul class="sidebar-list">
            <li>
                <a href="javascript:;">
                    <div class="small pull-right m-t-xs">9小时以后</div>
                    <h4>市场调研</h4> 按要求接收教材；
                    <div class="small">已完成： 22%</div>
                    <div class="progress progress-mini">
                        <div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
                    </div>
                    <div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
                </a>
            </li>
        </ul>
    </div>
</div><!--tab-content-->

</div>
</div>
